<template>
	<view class="map-box">
		<view id="allmap" :style="pattern" class="tui-maps"></view>
	</view>
</template>

<script>
	import {
		jsBMap
	} from '@/static/js/jsBMap.js';
	export default {
		props: {
			longitude: {
				type: Number,
				default: 0
			},
			latitude: {
				type: Number,
				default: 0
			},
			address: {
				type: String,
				default: ''
			},
			pattern: {
				type: String,
				default: 'width: 750rpx;height: 600rpx;border-radius: 12rpx;'
			}
		},
		data() {
			return {
				ak: 'v4zr0QXB8HDbB49GYNAXu5FnEzaKAh75', // 20685b399d9c4b1f5e85a223a0e8d4b2
			}
		},
		watch: {
			latitude: {
				handler() {
					this.getInit()
				}
			}
		},
		mounted() {
			if (this.longitude) {
				this.getInit()
			}
		},
		methods: {
			getInit() {
				const that = this
				jsBMap(this.ak).then(BMapGL => {
					const th = this
					const map = new BMapGL.Map("allmap"); // 创建Map实例
					const point = new BMapGL.Point(that.longitude, that.latitude); // 创建点坐标
					console.log(point)
					var myIcon = new BMapGL.Icon("https://ebc-prod.cdn.benwunet.com/uni-static/location.png",
						new BMapGL.Size(28, 28), {
							imageOffset: new BMapGL.Size(0, 0), // 设置图片偏移   
							imageSize: new BMapGL.Size(28, 28) // 设置图片大小
						});
					this.marker = new BMapGL.Marker(point, {
						icon: myIcon
					}); // 创建标注
					map.addOverlay(this.marker); // 将标注添加到地图中
					map.centerAndZoom(point, 15);
					// map.setMapStyle({
					// 		// features: ["road","building","water","land"],//隐藏地图上的"poi",
					// 		style : 'dark',
					// 	});
					map.disableDragging();     //禁止拖拽
					map.disableScrollWheelZoom();//禁止缩放
					// var myCity = new BMapGL.LocalCity();
					// myCity.get((result)=>{
					// 	console.log(result)
					// 	// var cityName = result.name;
					// 	// map.setCenter(cityName);
					// 	// console.log(result)
					// 	// // alert("当前定位城市:" + cityName);
					// 	// const point = new BMapGL.Point(result.center.lng, result.center.lat); // 创建点坐标
					// 	// var myIcon = new BMapGL.Icon("https://ebc-prod.cdn.benwunet.com/uni-static/location.png",
					// 	//  new BMapGL.Size(28, 28), 
					// 	//  {
					// 	// 	imageOffset: new BMapGL.Size(0,0),   // 设置图片偏移   
					// 	// 	imageSize: new BMapGL.Size(28, 28) // 设置图片大小
					// 	// });  
					// 	// this.marker = new BMapGL.Marker(point, {icon: myIcon});// 创建标注
					// 	// map.addOverlay(this.marker);              // 将标注添加到地图中
					// 	// map.centerAndZoom(point, 15);
					// });
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tui-maps {
		// width: 750rpx;
		// height: 600rpx;
		// position: relative;

		overflow: hidden;
	}
</style>